<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item label="上级仓库" prop="parentId">
            <el-tree-select
              v-model="baTable.form.items!.parentId"
              :data="state.deptOptions"
              check-strictly
              :props="{
                label: 'memoryName',
                value: 'memoryId',
                children: 'children',
              }"
              :render-after-expand="false"
              @node-click="handleCheckChange"
            />
          </el-form-item>
          <el-form-item label="仓库名称" prop="memoryName">
            <el-input
              v-model="baTable.form.items!.memoryName"
              placeholder="请输入仓库名称"
            />
          </el-form-item>
          <el-form-item label="仓库编码" prop="memoryCode">
            <el-input
              v-model="baTable.form.items!.memoryCode"
              placeholder="请输入仓库编码"
            />
          </el-form-item>
          <el-form-item label="仓库空间类型" prop="memoryType">
            <el-select
              v-model="baTable.form.items!.memoryType"
              placeholder="请选择仓库空间类型"
            >
              <el-option
                v-for="item in state.memoryTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue - 0"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="存储物料类型" prop="materialType">
            <el-select
              v-model="baTable.form.items!.materialType"
              placeholder="请选择存储物料类型"
            >
              <el-option
                v-for="item in state.materialTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="baTable.form.items!.remark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="仓库备注"
            />
          </el-form-item>
          <!-- <FormItem
              label="部仓库状态"
              v-model="baTable.form.items!.status"
              type="radio"
              :data="{
                content: { 0: '正常', 1: '停用' },
                childrenAttr: { border: true },
              }"
            /> -->
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          {{ baTable.form.operate === "itemAdd" ? "确定并新增下一项" : "确定" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";
import FormItem from "@/components/formItem/index.vue";
import { useUser } from "@/store/backend/SysM/user";
import { useDictionary } from "@/store/backend/tool/dictionary";
import { getDictData } from "@/utils/common"; // 导入表格api方法生成器

type Option = {
  id: number;
  label: string;
  children: Option[];
};
const user = useUser();
//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const formRef = ref<InstanceType<typeof ElForm>>();
const dictionary = inject("dictionary") as any;
const Location = inject("Location") as any;

const state: {
  deptOptions: Option[];
  memoryInfoOptions: Option[];
  deptTypeOptions: any[];
  materialTypeOptions: any[];
  memoryTypeOptions: any[];
  materialRecordTypeOptions: any[];
  purposeOptions: any[];
} = reactive({
  deptOptions: [], //部门列表
  memoryInfoOptions: [], //库位下拉树列表
  deptTypeOptions: [], //部门类型列表
  materialTypeOptions: [], //物料类型列表
  memoryTypeOptions: [], //仓库空间类型列表
  materialRecordTypeOptions: [], //出入库类型列表
  purposeOptions: [], //出入库用途列表
});
const rules = reactive<FormRules>({
  // parentId: [{ required: true, message: "上级仓库不能为空", trigger: "blur" }],
  memoryName: [
    { required: true, message: "仓库名称不能为空", trigger: "blur" },
  ],
  memoryCode: [
    { required: true, message: "仓库编码不能为空", trigger: "blur" },
  ],
  memoryType: [
    { required: true, message: "仓库空间类型不能为空", trigger: "blur" },
  ],
  materialType: [
    { required: true, message: "存储物料类型不能为空", trigger: "blur" },
  ],
  // email: [
  //   {
  //     type: "email",
  //     message: "请输入正确的邮箱地址",
  //     trigger: ["blur", "change"],
  //   },
  // ],
  // phone: [
  //   {
  //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  //     message: "请输入正确的手机号码",
  //     trigger: "blur",
  //   },
  // ],
});

//获取出入库类型/出入库用途字典
const getMenuStatus = () => {
  if (
    JSON.stringify(dictionary.moreTags) == "{}" ||
    !JSON.stringify(dictionary.moreTags["materialRecordType"])
  ) {
    dictionary.getDictInfo("sys_materialrecord_type").then((res: any) => {
      dictionary.moreTags["materialRecordType"] = getDictData(res);
      dictionary.moreTags["materialRecordTypeOrigin"] = res;
    });
  } else {
    state.materialRecordTypeOptions =
      dictionary.moreTags["materialRecordTypeOrigin"];
    console.log("获取出入库类型的字典", state.memoryTypeOptions);
  }
  if (
    JSON.stringify(dictionary.moreTags) == "{}" ||
    !JSON.stringify(dictionary.moreTags["purpose"])
  ) {
    dictionary.getDictInfo("sys_materialrecord_purpose").then((res: any) => {
      dictionary.moreTags["purpose"] = getDictData(res);
      dictionary.moreTags["purposeOrigin"] = res;
    });
  } else {
    state.purposeOptions = dictionary.moreTags["purposeOrigin"];
    console.log("获取出入库用途的字典", state.purposeOptions);
  }
};
//获取部门类型字典
getMenuStatus();

const handleCheckChange = (e: any) => {
  console.log("e", e);
  baTable.form.items!.parentCode = e.memoryCode; //父级code赋值
};

onMounted(() => {
  //获取库位下拉树数据
  Location.getLocationTree().then((res: any) => {
    state.deptOptions = res;
    console.log("state.deptOptions", res, state.deptOptions);
  });
});
</script>
<style lang="scss" scoped></style>
